<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐播放控件Audio测试</title>
    <style>
        #mid{border-radius:50%;}
        .rainbow{animation: 20s rainbow infinite linear;}
		@keyframes rainbow { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
    </style>
</head>
<body>
    <h2>自己定制播放控件--播放和暂停功能的实现</h2>
    <audio id="aid" src="./data/1.mp3"></audio>
    <img id="mid" src="./data/1.jpg" width="150"/><br/>
    <button onclick="doStart()">播放</button>
    <button onclick="doStop()">暂停</button>
    <script>
        //获取上面音频标签节点
        //var aid = document.getElementById("aid");
        var aid = document.querySelector("#aid");
        var mid = document.querySelector("#mid");
        
        //定义一个函数
        function doStart(){
            aid.play(); //执行播放
            mid.classList.add("rainbow");
        }

        function doStop(){
            aid.pause(); //执行暂停
            mid.classList.remove("rainbow");
        }
    </script>
</body>

</html>